<html>
<head>
    <title>风险责任清单</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body {
            background: #F0F2F6;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        img {
            width: 30px;
            width: 32px;
        }

        td {
            text-align: center;
            height: 50px; /*这里需要自己调整，根据自己的需求调整高度*/
            position: relative;
        }

        td[class=first] {
            width: 100px;
        }

        td[class=first]:before {
            content: "";
            position: absolute;
            width: 1px;
            height: 160px;
            top: 0;
            left: 0;
            background-color: #000;
            display: block;
            transform: rotate(-73deg);
            transform-origin: top;
            -ms-transform: rotate(-73deg);
            -ms-transform-origin: top;
        }

        .title1 {
            position: absolute;
            top: 0px;
            right: 0px;
        }

        .title2 {
            position: absolute;
            top: 26px;
            right: 70px;
        }


    </style>
</head>
<body>
<div class="page" id="page-monitor">

    <div class="page-title">风险管理 › 风险责任清单</div>
    <div class="page-main">
        <el-row>
            <el-col :span="24">
                <div class="main-head">
                    <el-form :inline="true" size="small" :model="searchForm">
                        <el-form-item label="风险点名称">
                            <el-input placeholder="风险点名称" style="width: 150px;"
                                      v-model="searchForm.riskName"></el-input>
                        </el-form-item>

                        <el-form-item label="风险点等级">
                            <el-select style="width: 150px;" v-model="searchForm.grade">
                                <el-option value='1' label="Ⅰ"></el-option>
                                <el-option value='2' label="Ⅱ"></el-option>
                                <el-option value='3' label="Ⅲ"></el-option>
                                <el-option value='4' label="Ⅳ"></el-option>
                            </el-select>
                        </el-form-item>


                        <el-form-item>
                            <el-button type="primary" @click="search">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>

            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-table :data="tableData" :stripe="true" :border="true" size="mini" style="width: 100%">
                    <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                    <el-table-column prop="riskName" label="风险点名称" align="center"></el-table-column>
                    <el-table-column prop="grade" label="风险等级" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.grade==1">
                                <img src="../../../imgs/onelevel.png">
                            </div>
                            <div v-if="scope.row.grade==2">
                                <img src="../../../imgs/twolevel.png">
                            </div>
                            <div v-if="scope.row.grade==3">
                                <img src="../../../imgs/threelevel.png">
                            </div>
                            <div v-if="scope.row.grade==4">
                                <img src="../../../imgs/fourlevel.png">
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="巡检人员" align="center"></el-table-column>
                    <!--<el-table-column prop="Telephone" label="联系方式" align="center"></el-table-column>-->
                    <el-table-column prop="manager" label="责任人" align="center"></el-table-column>
                    <el-table-column prop="usTelephone" label="联系方式" align="center"></el-table-column>
                    <el-table-column label="巡检周期" align="center" width="280">
                        <template slot-scope="scope">
                            <el-tag>每{{scope.row.cycle}}{{typeJson[scope.row.cycleType]}}一次</el-tag>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page-footer">
                    <el-pagination background layout="prev, pager, next" :pagesize="pageSize" :total="totalCount"
                                   :current-page.sync="currentPage" @current-change="onChangePage">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
    </div>
</div>


<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>

<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            pageSize: 10,
            currentPage: 1,
            totalCount: 0,
            tableData: [],
            typeJson: {
                0: '分',
                1: '时',
                2: '天',
                3: '周',
                4: '月',
                5: '年',
            },
            searchForm: {},
        },
        methods: {
            onChangePage: function (page) {
                this.currentPage = page;
                this.getTaskList({});
            },
            search: function () {
                this.getTaskList(this.searchForm);
            },
            onCheckbox: function (row) {

            },
            getTaskList: function (param) {
                param['projectNo'] = SiteConfig.account.projectNo;
                param.pagesize = 10;
                param.pageno = this.currentPage;
                HttpUtil.get('Risk/taskList', param).success((res) => {
                    this.tableData = [];
                    let obj = res.data;
                    for (var i = 0; i < obj.length; i++) {
                        var name = "";
                        for (var j = 0; j < obj[i].group.length; j++) {
                            name += obj[i].group[j].userName;
                            if (j < obj[i].group.length - 1)
                                name += ",";
                        }
                        var p = obj[i].task;
                        p.name = name;
                        this.tableData.push(p);
                    }
                    this.totalCount = res.total;
                })
            }
        },
        created: function () {
            $('.page').show();

        },
        mounted: function () {

            this.tableData = [
                {
                    name: '叉车', level: 1, depart: '操作班', people: '张麻子', tel: 12345678901, cycle: 1, times: 2
                }
            ]
            this.getTaskList({});

        }
    });


</script>

</body>
</html>
